import React, { useState, useEffect, useReducer } from 'react'
import { View, Text, TextInput, Button, StyleSheet, Image, TouchableOpacity, Alert } from 'react-native'
import { connect } from 'react-redux'

import axios from 'axios'//当页面有第二个get/post/put/delete方法时，直接使用axios调用

import stateToProps from '../store/stateToProps'//变量
import dispatchToProps from '../store/dispatchToProps'//方法
import { ScrollView } from 'react-native-gesture-handler'
const publishlist = [
    { id: 1, img: { uri: 'https://reactnative.dev/img/tiny_logo.png' }, name: '小小夏', time: '2021-02-26 17:12', content: '拍结婚证当天应该穿什么？有什么要求吗？' },
    { id: 2, img: { uri: 'https://reactnative.dev/img/tiny_logo.png' }, name: '夏校', time: '2021-02-26 17:12', content: '拍结婚证当天应该穿什么？有什么要求吗？' },
]
const answerlist=[
    { id: 1, img: { uri: 'https://reactnative.dev/img/tiny_logo.png' }, name: '小小木', time: '2021-02-26 17:12', content: '拍结婚证当天应该穿什么？有什么要求吗？' },
    { id: 2, img: { uri: 'https://reactnative.dev/img/tiny_logo.png' }, name: '夏校', time: '2021-02-26 17:12', content: '拍结婚证当天应该穿什么？有什么要求吗？' },
]
const tabs = [
    { text: '已提问', id: 0 },
    { text: '已回答', id: 1 }
]
const Tab = (props) => {
    return props.isTab == 0 ?
        <Question></Question> :
        <Answer></Answer>
}
const Question = (props) => {
    return (
        <View>
            {
                publishlist.map((item, idx) =>
                    <TouchableOpacity style={styles.lists} key={idx}>
                        <Image
                            style={styles.img}
                            source={item.img}
                        />
                        <Text style={styles.name}>{item.name}</Text>
                        <Text style={styles.time}>{item.time}</Text>
                        <Text style={styles.content}>{item.content}</Text>
                    </TouchableOpacity>)
            }
        </View>

    )
}
const  Answer= (props) => {
    return (
        <View>
            {
                answerlist.map((item, idx) =>
                    <TouchableOpacity style={styles.lists} key={idx}>
                        <Image
                            style={styles.img}
                            source={item.img}
                        />
                        <Text style={styles.name}>{item.name}</Text>
                        <Text style={styles.time}>{item.time}</Text>
                        <Text style={styles.content}>{item.content}</Text>
                    </TouchableOpacity>)
            }
        </View>

    )
}
const Publish = (props) => {
    let { inputValue, inputChange, clickBtn, postFun, deleteFun, getFun, putFun,
        list, data, post, } = props
        const [selectTab, setSelectTab] = useState(0)
    /*这里是页面加载完成时调用，会调用get请求，拉取数据*/
    // useEffect(() => {
    //     getFun()
    // })
    return (
        <ScrollView style={{ flex: 1, backgroundColor: '#F7F7F8' }}>
            <View style={styles.top}>
                <Text style={styles.back} onPress={() => { props.navigation.push('Mine') }}>Back</Text>
                <Text style={styles.title}>已发布</Text>
            </View>
            {/* 收藏列表 */}
            <View style={styles.nav}>
                {
                tabs.map((item, idx) => <Text
                    onPress={() => setSelectTab(item.id)}
                    key={idx}
                    style={[styles.tabs, { borderBottomWidth: selectTab == item.id ? 3 : 0 }]}>{item.text}</Text>)
            }
            </View>
            <Tab isTab={selectTab} navigation={props.navigation}></Tab>
        </ScrollView>
    )
}

const styles = StyleSheet.create({
    
    tabs: {
        borderBottomColor: '#FB7737',
        lineHeight: 30,
        flex: 1,
        fontSize: 15,
        color:'black',
        marginLeft:25
    },
    nav: {
        marginLeft:ptd(110),
        backgroundColor:'white',
        width: '40%',
        height: ptd(30),
        flex: 1,
        flexDirection: 'row',
        marginTop: 60,
        borderRadius:5,
    },
    question: {
        width: ptd(70),
        height: ptd(30),
        marginTop: ptd(50),
        backgroundColor: 'white',
        justifyContent: 'center',
        alignItems: 'center',
        marginLeft: ptd(115)
    },
    answer: {
        width: ptd(70),
        height: ptd(30),
        backgroundColor: 'white',
        justifyContent: 'center',
        alignItems: 'center',
        marginLeft: ptd(185),
        marginTop: ptd(-30)
    },
    content: {
        marginLeft: ptd(25),
        marginTop: ptd(10),
        fontSize: 20,
        marginRight: ptd(15)
    },
    time: {
        marginLeft: ptd(75),
        marginTop: ptd(10),
        fontSize: 10,
        color: '#9E9D9D'
    },
    name: {
        marginLeft: ptd(75),
        marginTop: ptd(10)
    },
    img: {
        height: ptd(30),
        width: ptd(30),
        borderRadius: 20,
        position: 'absolute',
        top: ptd(13),
        left: ptd(25)
    },
    lists: {
        width: '90%',
        height: ptd(130),
        borderRadius: 10,
        borderColor: '#ccc',
        borderWidth: 1,
        marginLeft: '5%',
        marginTop: 20,
        backgroundColor: 'white'
    },
    title: {
        fontSize: 20,
        position: 'absolute',
        top: ptd(7),
        left: ptd(160)
    },
    back: {
        paddingLeft: ptd(10),
        marginTop: ptd(10)
    },
    top: {
        position: 'absolute',
        width: '100%',
        height: 50,
        backgroundColor: '#F8F8F8',
        borderColor: '#F8F8F8',
        borderWidth: 2
    }
});
//每个自己写的组件（页面）都要用下面这一行
export default connect(stateToProps, dispatchToProps)(Publish);
